<template>
  <el-form :model="AddGroupForm" status-icon :rules="rules" ref="AddGroupForm"
           label-width="auto">
    <h2 class="region_title">添加群组</h2>
    <el-form-item prop="groupName" label="群组名称">
      <el-input type="text" v-model="AddGroupForm.groupName"
                placeholder="群组名称" ></el-input>
    </el-form-item>
  </el-form>
</template>
<script>
  export default {
    name: "AddGroupForm",
    data () {
      var valiGroupName = (rule, value, callback) =>{
        if (value === ''){
          callback(new Error('群组名称不能为空'));
        }else {
          callback();
        }
      }
      return {
        AddGroupForm: {
          groupName: ''
        },
        rules:{
          groupName:[
            { validator: valiGroupName, trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitGroupForm(appId) {
        this.$refs['AddGroupForm'].validate((valid) => {
          if (valid) {
            this.$axios
              .post('/api/group/add', {
                groupName: this.AddGroupForm.groupName,
                appId: appId
              })
              .then(success=>{

                this.$message({
                  type: 'info',
                  message: "添加成功！"
                });
              }).catch(fail=>{this.$message.error("添加失败")})
          } else {
            this.$message.error("编辑信息有误")
            return false;
          }
        });
      },
      resetAddGroupForm() {
        this.$refs['AddGroupForm'].resetFields();
      }
    }
  }
</script>

<style scoped>
  .region_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: darkslateblue;
  }

</style>
